<template>
    <el-card>
        <template #header>
            <div class="flex justify-between">
                <span class="text-sm">订单统计</span>
                <div>
                    <el-check-tag v-for="(item, index) in options" :key="index" :checked="current == item.value"
                        @click="handleChoose(item.value)" class="mr-2">
                        {{ item.text }}
                    </el-check-tag>
                </div>
            </div>
        </template>
        <div id="chart" style="width: 100%; height: 300px;"></div>
    </el-card>

</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { sta_sales_record } from "@/axios/sta"

const current = ref("week")
const handleChoose = (type) => {
    console.log(type)
    current.value = type
    getData()
}
const options = [
    {
        text: "近1个月",
        value: "month"
    }, {
        text: "近1周",
        value: "week"
    }, {
        text: "近24小时",
        value: "hour"
    }
]

var myChart = null
onMounted(() => {
    var chartDom = document.getElementById('chart');
    myChart = echarts.init(chartDom);
    getData()
})

function getData() {
    let option = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [{}],
                type: 'bar'
            }
        ]
    };
    myChart.showLoading()
    sta_sales_record(current.value).then(res => {
        console.log(res)
        option.xAxis.data = res.x;
        option.series[0].data = res.y;
        myChart.setOption(option);
    }).finally(() => {
        myChart.hideLoading()
    })

}

</script>